Copy
1import { useTheme } from "@sistent/sistent";
2
3function MyComponent() {
4  const theme = useTheme();
5  
6  return (
7    <div style={{
8      backgroundColor: theme.palette.primary.main,
9      color: theme.palette.primary.contrastText,
10      padding: theme.spacing(2)
11    }}>
12      Using Sistent design tokens
13    </div>
14  );
15}

Copy
1// Primary brand colors
2theme.palette.primary.main      // Layer5 Green
3theme.palette.secondary.main    // Layer5 Orange
4
5// Semantic colors
6theme.palette.error.main        // Error red
7theme.palette.success.main      // Success green
8theme.palette.warning.main      // Warning orange
9theme.palette.info.main         // Info blue
10
11// Background and text
12theme.palette.background.default
13theme.palette.text.primary

Copy
1// Typography scale
2theme.typography.h1             // Large headings
3theme.typography.h6             // Small headings
4theme.typography.body1          // Primary body text
5theme.typography.body2          // Secondary body text
6
7// Font properties
8theme.typography.fontFamily     // Primary font
9theme.typography.fontWeightBold // Font weights

Copy
1// 8px-based spacing system
2theme.spacing(1)    // 8px
3theme.spacing(2)    // 16px
4theme.spacing(3)    // 24px
5theme.spacing(4)    // 32px
6
7// Usage in components
8<Box sx={{ p: 2, mb: 3 }}>
9  {/* padding: 16px, margin-bottom: 24px */}
10</Box>

Copy
1import { styled, Card, Typography } from "@sistent/sistent";
2
3const ProductCard = styled(Card)(({ theme }) => ({
4  // Background and borders using color tokens
5  backgroundColor: theme.palette.background.paper,
6  border: `1px solid ${theme.palette.divider}`,
7  borderRadius: theme.shape.borderRadius,
8  
9  // Consistent spacing using spacing tokens
10  padding: theme.spacing(3),
11  marginBottom: theme.spacing(2),
12  
13  // Typography tokens for text hierarchy
14  '& .product-title': {
15    ...theme.typography.h5,
16    color: theme.palette.text.primary,
17    marginBottom: theme.spacing(1),
18    fontWeight: theme.typography.fontWeightMedium,
19  },
20  
21  '& .product-description': {
22    ...theme.typography.body1,
23    color: theme.palette.text.secondary,
24    marginBottom: theme.spacing(2),
25    lineHeight: 1.6,
26  },
27  
28  '& .product-price': {
29    ...theme.typography.h6,
30    color: theme.palette.primary.main,
31    fontWeight: theme.typography.fontWeightBold,
32  },
33  
34  // Interactive states with color tokens
35  '&:hover': {
36    backgroundColor: theme.palette.action.hover,
37    transform: 'translateY(-2px)',
38    transition: 'all 0.2s ease-in-out',
39  },
40  
41  // Responsive spacing
42  [theme.breakpoints.up('md')]: {
43    padding: theme.spacing(4),
44  },
45}));
46
47// Usage example
48function ProductShowcase({ products }) {
49  return (
50    <div style={{ gap: theme.spacing(2) }}>
51      {products.map(product => (
52        <ProductCard key={product.id}>
53          <div className="product-title">{product.name}</div>
54          <div className="product-description">{product.description}</div>
55          <div className="product-price">`$`{product.price}</div>
56        </ProductCard>
57      ))}
58    </div>
59  );
60}