0
# DSFR Integration
1

2
DSFR (Système de Design de l'État français) integration provides pre-configured TSS instances with French Government Design System context and dark mode detection capabilities.
3

4
## Capabilities
5

6
### DSFR TSS Instance
7

8
Pre-configured TSS instance with DSFR context including dark mode detection from `@codegouvfr/react-dsfr`.
9

10
```typescript { .api }
11
import { tss } from "tss-react/dsfr";
12

13
/**
14
 * Pre-configured TSS instance with DSFR context
15
 * Context includes: { isDark: boolean }
16
 */
17
const tss: Tss<{ isDark: boolean }, {}, never, {}, never>;
18
```
19

20
**Usage Example:**
21

22
```typescript
23
import { tss } from "tss-react/dsfr";
24

25
const useStyles = tss.create(({ isDark }) => ({
26
  container: {
27
    backgroundColor: isDark ? "#1e1e1e" : "#ffffff",
28
    color: isDark ? "#ffffff" : "#000000",
29
    padding: 16
30
  },
31
  button: {
32
    backgroundColor: isDark ? "#0a76f6" : "#000091",
33
    color: "#ffffff",
34
    border: "none",
35
    padding: "8px 16px",
36
    borderRadius: 4
37
  }
38
}));
39

40
function DSFRComponent() {
41
  const { classes } = useStyles();
42
  return (
43
    <div className={classes.container}>
44
      <button className={classes.button}>DSFR Button</button>
45
    </div>
46
  );
47
}
48
```
49

50
### DSFR UseStyles Hook
51

52
Default useStyles hook from the DSFR TSS instance.
53

54
```typescript { .api }
55
/**
56
 * Default useStyles hook with DSFR context
57
 * Equivalent to tss.create({})
58
 */
59
const useStyles: UseStyles<{ isDark: boolean }, {}, string, {}>;
60
```
61

62
## Implementation Details
63

64
The DSFR integration is built using the `useIsDark` hook from `@codegouvfr/react-dsfr`:
65

66
```typescript { .api }
67
// Internal implementation (for reference)
68
import { useIsDark } from "@codegouvfr/react-dsfr/useIsDark";
69
import { createTss } from "tss-react";
70

71
const { tss } = createTss({
72
  useContext: function useDsfrContext() {
73
    const { isDark } = useIsDark();
74
    return { isDark };
75
  }
76
});
77
```
78

79
## Requirements
80

81
To use DSFR integration, you must install the required peer dependency:
82

83
```bash
84
npm install @codegouvfr/react-dsfr
85
```
86

87
## Context Properties
88

89
### isDark
90

91
```typescript { .api }
92
interface DsfrContext {
93
  /** 
94
   * Boolean indicating if dark mode is currently active
95
   * Automatically detected from DSFR theme context
96
   */
97
  isDark: boolean;
98
}
99
```
100

101
## Usage Patterns
102

103
### Theme-Aware Components
104

105
```typescript
106
import { tss } from "tss-react/dsfr";
107

108
const useStyles = tss
109
  .withName("ThemeAwareCard")
110
  .create(({ isDark }) => ({
111
    card: {
112
      backgroundColor: isDark ? "#2a2a2a" : "#f6f6f6",
113
      border: `1px solid ${isDark ? "#444" : "#ddd"}`,
114
      borderRadius: 8,
115
      padding: 20,
116
      boxShadow: isDark 
117
        ? "0 2px 8px rgba(0,0,0,0.3)" 
118
        : "0 2px 8px rgba(0,0,0,0.1)"
119
    },
120
    title: {
121
      color: isDark ? "#ffffff" : "#161616",
122
      fontSize: 18,
123
      fontWeight: 700,
124
      marginBottom: 12
125
    },
126
    content: {
127
      color: isDark ? "#e0e0e0" : "#3a3a3a",
128
      lineHeight: 1.5
129
    }
130
  }));
131
```
132

133
### DSFR Component Library Integration
134

135
```typescript
136
import { tss } from "tss-react/dsfr";
137

138
const useStyles = tss.create(({ isDark }) => ({
139
  dsfrButton: {
140
    // Base DSFR button styles
141
    fontFamily: "Marianne, arial, sans-serif",
142
    fontWeight: 500,
143
    fontSize: "1rem",
144
    lineHeight: "1.5rem",
145
    minHeight: "2.5rem",
146
    padding: "0.5rem 1rem",
147
    border: "none",
148
    borderRadius: "0.25rem",
149
    cursor: "pointer",
150
    
151
    // Theme-aware colors
152
    backgroundColor: isDark ? "#0a76f6" : "#000091",
153
    color: "#ffffff",
154
    
155
    "&:hover": {
156
      backgroundColor: isDark ? "#1f8aff" : "#1212ff"
157
    },
158
    
159
    "&:focus": {
160
      outline: `2px solid ${isDark ? "#8585f6" : "#0063cb"}`,
161
      outlineOffset: "2px"
162
    }
163
  }
164
}));
165
```
166

167
## Reference
168

169
For more information about DSFR and the underlying design system, see:
170
- [DSFR Official Documentation](https://www.systeme-de-design.gouv.fr/)
171
- [React DSFR Library](https://react-dsfr.etalab.studio/)