@jamesodwyer/gds-figma-vite 2.0.13 → 2.0.14
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/guidelines/Guidelines.md +53 -0
- package/package.json +1 -1
package/guidelines/Guidelines.md
CHANGED
|
@@ -250,6 +250,59 @@ import { Modal, Card, InputField, Accordion, TextStyle } from '@jamesodwyer/gds-
|
|
|
250
250
|
|
|
251
251
|
---
|
|
252
252
|
|
|
253
|
+
## 🎨 TEXT & BACKGROUND COLORS - CONTRAST RULES
|
|
254
|
+
|
|
255
|
+
**Always ensure text is readable against backgrounds:**
|
|
256
|
+
|
|
257
|
+
| Background | Text Color |
|
|
258
|
+
| ------------------------------------- | ------------------------------------------- |
|
|
259
|
+
| Light (white, `theme.base.bg`) | Dark text (`theme.text.primary` = #121212) |
|
|
260
|
+
| Dark (`theme.base.bgInverse`, cosmos) | Light text (`theme.text.inverse` = #ffffff) |
|
|
261
|
+
|
|
262
|
+
### Using Theme Colors for Contrast
|
|
263
|
+
|
|
264
|
+
```tsx
|
|
265
|
+
import styled from "styled-components";
|
|
266
|
+
|
|
267
|
+
// ✅ CORRECT - Light background with dark text
|
|
268
|
+
const LightSection = styled.div`
|
|
269
|
+
background: ${(props) => props.theme.base.bg};
|
|
270
|
+
color: ${(props) => props.theme.text.primary};
|
|
271
|
+
`;
|
|
272
|
+
|
|
273
|
+
// ✅ CORRECT - Dark background with light text
|
|
274
|
+
const DarkSection = styled.div`
|
|
275
|
+
background: ${(props) => props.theme.base.bgInverse};
|
|
276
|
+
color: ${(props) => props.theme.text.inverse};
|
|
277
|
+
`;
|
|
278
|
+
|
|
279
|
+
// ✅ CORRECT - Brand colored background with white text
|
|
280
|
+
const BrandSection = styled.div`
|
|
281
|
+
background: ${(props) => props.theme.base.primary};
|
|
282
|
+
color: #ffffff;
|
|
283
|
+
`;
|
|
284
|
+
```
|
|
285
|
+
|
|
286
|
+
### Default Text Colors
|
|
287
|
+
|
|
288
|
+
- **Light backgrounds**: Text is automatically dark (#121212)
|
|
289
|
+
- **GDS components**: Already have correct text colors built-in
|
|
290
|
+
- **Custom sections**: You must set the text color if you change the background
|
|
291
|
+
|
|
292
|
+
```tsx
|
|
293
|
+
// ❌ WRONG - Dark background but no text color set (text will be dark/invisible)
|
|
294
|
+
<div style={{ background: '#121212' }}>
|
|
295
|
+
<TitleHeading>Can't read this!</TitleHeading>
|
|
296
|
+
</div>
|
|
297
|
+
|
|
298
|
+
// ✅ CORRECT - Dark background with white text
|
|
299
|
+
<div style={{ background: '#121212', color: '#ffffff' }}>
|
|
300
|
+
<TitleHeading>Now visible!</TitleHeading>
|
|
301
|
+
</div>
|
|
302
|
+
```
|
|
303
|
+
|
|
304
|
+
---
|
|
305
|
+
|
|
253
306
|
## Package Information
|
|
254
307
|
|
|
255
308
|
- **Package Name**: `@jamesodwyer/gds-figma-vite`
|