Theming · Glowup

Design tokens

Theming

Every colour, type step, spacing unit and corner radius in the library comes from one token set, resolved for the light and dark schemes. These swatches are the live values of the theme this page is rendered with.

Showing the light scheme.

Colour sets

Twenty-two colour sets: the Material 3 baseline, the hand-authored Databeasy and inXpire brand sets, and the nineteen named Material hues run through the same role mapping from their seed. Picking one re-themes the whole site — every page, every component demo — because the library resolves its tokens from the selected set.

Velvet violet

Selected

Databeasy

#1D5B9D

inXpire

#171717

Cherry

#F44336

Bubblegum

#E91E63

Amethyst

#9C27B0

Violet night

#673AB7

Indigo

#3F51B5

Ultramarine

#2196F3

Sky

#03A9F4

Lagoon

#00BCD4

Petrol

#009688

Forest

#4CAF50

Pistachio

#8BC34A

Limoncello

#CDDC39

Sunflower

#FFEB3B

Amber

#FFC107

Blood orange

#FF9800

Terracotta

#FF5722

Espresso

#795548

Graphite

#9E9E9E

Slate

#607D8B

Primary

primary

#6750A4

onPrimary

#FFFFFF

primaryContainer

#EADDFF

onPrimaryContainer

#21005D

inversePrimary

#D0BCFF

Secondary

secondary

#625B71

onSecondary

#FFFFFF

secondaryContainer

#E8DEF8

onSecondaryContainer

#1D192B

Tertiary

tertiary

#7D5260

onTertiary

#FFFFFF

tertiaryContainer

#FFD8E4

onTertiaryContainer

#31111D

Error

error

#B3261E

onError

#FFFFFF

errorContainer

#F9DEDC

onErrorContainer

#410E0B

Surfaces

background

#FEF7FF

onBackground

#1D1B20

surface

#FEF7FF

onSurface

#1D1B20

surfaceVariant

#E7E0EC

onSurfaceVariant

#49454F

surfaceContainerLow

#F7F2FA

surfaceContainer

#F3EDF7

surfaceContainerHigh

#ECE6F0

surfaceContainerHighest

#EDE7F0

surfaceDim

#DED8E1

inverseSurface

#322F35

inverseOnSurface

#F5EFF7

surfaceTint

#6750A4

Lines & shadows

outline

#79747E

outlineVariant

#CAC4D0

scrim

#000000

shadow

#000000

Other

boxShadow

0px 1px 3px rgba(0,0,0,0.2), 0px 1px 2px rgba(0,0,0,0.14), 0px 1px 1px rgba(0,0,0,0.12)

Type scale

Fifteen steps, all on the system font family. `Typography` takes the step name as its variant.

displayLarge

57 / 64 · 400

displayMedium

45 / 52 · 400

displaySmall

36 / 44 · 400

headlineLarge

32 / 40 · 400

headlineMedium

28 / 36 · 400

headlineSmall

24 / 32 · 400

titleLarge

22 / 28 · 400

titleMedium

16 / 24 · 500

titleSmall

14 / 20 · 500

bodyLarge

16 / 24 · 400

bodyMedium

14 / 20 · 400

bodySmall

12 / 16 · 400

labelLarge

14 / 20 · 500

labelMedium

12 / 16 · 500

labelSmall

11 / 16 · 500

Spacing

Five steps. Layout primitives take the token name, StyleSheets take the value.

4dp

8dp

16dp

24dp

32dp

Shape

Corner radii, by role rather than by number.

small

8dp

medium

12dp

large

16dp

extraLarge

28dp

Reading tokens in your own code

The pattern every component in the library follows.

Card.tsx

import { useTheme } from "@its/glowup-ui"; import { StyleSheet } from "react-native"; const Card = () => { const { theme } = useTheme(); const styles = useMemo(() => makeStyles(theme), [theme]); return <View style={styles.card} />; }; // Styles are rebuilt when the theme changes — never read a token at module scope. const makeStyles = (theme: Theme) => StyleSheet.create({ card: { padding: theme.spacing.m, borderRadius: theme.shape.large, backgroundColor: theme.colors.surfaceContainerLow, }, });

Using a colour set in your app

Everything the picker above does is public API. The set shown right now is `palettes.baseline`, seeded from #6750A4.

App.tsx

import { ThemeProvider, palettes } from "@its/glowup-ui"; // The colour set the app starts on. Both schemes come with it: the provider // still follows the OS light/dark setting and `toggleTheme()`. export default function App() { return ( <ThemeProvider initialPalette={palettes.teal}> <Root /> </ThemeProvider> ); }

PaletteMenu.tsx

import { palettes, useTheme } from "@its/glowup-ui"; // Swapping the set at runtime re-renders every component that reads the theme // — this picker is exactly this call. const PaletteMenu = () => { const { palette, setPalette } = useTheme(); return Object.values(palettes).map((p) => ( <Chip key={p.id} selected={p.id === palette.id} onPress={() => setPalette(p)}> {p.name} </Chip> )); };

Your own colours

A seed colour is enough — the tonal palettes and the role mapping are Material 3's. A palette authored by hand is the same shape, so either route ends at the same `initialPalette` prop.

brand.ts

import { createPalette, ThemeProvider } from "@its/glowup-ui"; // One brand colour in, both complete schemes out: primary, secondary and // tertiary tonal palettes plus the neutrals, mapped onto the M3 roles. Error // stays the fixed Material red, as the spec requires. const brand = createPalette("#00639B", { id: "brand", name: "Brand" }); // Tune how saturated the derived palettes are, if the default reads too calm: const vivid = createPalette("#00639B", { id: "brand-vivid", name: "Brand (vivid)", chroma: { primary: 64, tertiary: 32, tertiaryHueShift: 120 }, }); <ThemeProvider initialPalette={brand}>…</ThemeProvider>;

corporate.ts

import { palettes, type ThemePalette } from "@its/glowup-ui"; // Nothing is derived here: a palette is just the token set for both schemes, // so a hand-authored one — from Material Theme Builder, say — drops straight // in. Spread a shipped palette to fill in the roles you do not override. const corporate: ThemePalette = { id: "corporate", name: "Corporate", seed: "#00639B", light: { ...palettes.baseline.light, primary: "#00639B", onPrimary: "#FFFFFF" }, dark: { ...palettes.baseline.dark, primary: "#95CCFF", onPrimary: "#003354" }, };